<template>
    <div class="chuanact">
        <div class="matchinfo">
            <span class="hteam">{{teaminfo.HTeam}}</span>
            <span class="vteam">{{teaminfo.VTeam}}</span>
            <p class="leaguename"><strong>{{teaminfo.LeagueName}}</strong>
                <b>截止时间 {{teaminfo.EndTime}}</b>
            </p>
            <img src="//common-1253410441.file.myqcloud.com/activityimg/20171207160153.png" alt="">
        </div>
        <article class="intro">
            <img src="http://common-1253410441.file.myqcloud.com/activityimg/20171207162508.png" alt="">
            <span>活动期间，领取资格后投注“<b>{{teaminfo.HTeam}}VS{{teaminfo.VTeam}}</b>”的比赛，玩法限胜平负与让球胜平负的订单，过关方式限2串1。即可享受加奖（单场比赛可获得彩金上限为2888元）</span>
        </article>
        <a href="javascript:;" class="getstatus" @click="getQualification">
            {{hasget?'已领取 去投注':'领取资格'}}
        </a>
        <section class="pnel">
            <span class="title">加奖说明</span>
            <table>
                <thead>
                <tr>
                    <td>中奖奖金</td>
                    <td>加奖金额</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>100-499元</td>
                    <td>6元</td>
                </tr>
                <tr>
                    <td>500-1999元</td>
                    <td>35元</td>
                </tr>
                <tr>
                    <td>2000-4999元</td>
                    <td>160元</td>
                </tr>
                <tr>
                    <td>5000-10000元</td>
                    <td>450元</td>
                </tr>
                <tr>
                    <td>10000+元</td>
                    <td>1000元</td>
                </tr>
                </tbody>
            </table>
            <span class="title">活动规则</span>
            <aside>
                <dl>
                    <dd>
                        1、玩法加奖：仅限胜平负、让球胜平负两个玩法中
                        的2串1。
                    </dd>
                    <dd>2、加奖红包一天最多2888元。</dd>
                    <dd>3、奖励红包将于比赛开奖后24小时内派发，竞彩专
                        用红包，可在〖我的-我的红包〗查看。
                    </dd>
                    <dd>4、此活动不与其他相关加奖活动同时享受。</dd>
                    <dd>5、如购买比赛由于官方原因终止，此活动自动取消。</dd>
                    <dd>6、此活动最终解释权归本应用所有，本活动与苹果
                        公司无关。
                    </dd>
                </dl>
            </aside>
        </section>
    </div>

</template>

<script>
    import {Marquee, MarqueeItem, Toast} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative} from '../../utils/otherfn';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    export default {
        components: {
            Marquee,
            MarqueeItem,
            Toast
        },
        data() {
            return {
                teaminfo: {},
                hasget: false,
            };
        },
        created() {

        },
        mounted() {
            this.itemid = this.$route.params.itemid;
            this.getinfo(this.itemid)
        },
        methods: {
            /**
             * 获取一些初始化信息
             */
            jumpfn(){
                //jumptype[1]
                nativetonative(jumptype[1]);
            },
            async getinfo(itemid){
                const {data}=await axios.get(`/data/Handler.ashx?action=404&params={"Item":"${itemid}"}`);
                if(data && data.code === 0) {
                    this.teaminfo = data.data[0];
                    this.checkQualification();
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async checkQualification(){
                const {token}=await getMytoken(true);
                const {data}=await axios.get(`/hd/Handler.ashx?action=1149&params={"UserCode":"${token}","IssueNo":"${this.teaminfo.IssueNo}"}`);
                if(data && data.code === 1) {
                    this.hasget = true;
                }
                if(data && data.code === 0) {
                    this.hasget = false;
                }
            },
            async getQualification(){
                const {token}=await getMytoken(true);
                if(!token) {
                    getLogintoken(function (value) {
                        console.log('vvv', value);
                        if(value) {
                            location.reload();
                        }
                    }).then(({token})=> {
                    });
                }
                if(this.hasget) {
                    nativetonative(jumptype[1]);
                    return;
                }
                const {data}=await axios.get(`/hd/Handler.ashx?action=1150&params={"UserCode":"${token}","IssueNo":"${this.teaminfo.IssueNo}"}`);
                if(data && data.code === 0) {
                    this.$vux.toast.text('领取成功,快去投注吧!');
                    this.hasget = true;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    .chuanact {
        background: #4572fb;
        img {
            display: block;
            width: 100%;
        }
        padding-bottom: 40px;
    }

    .intro {
        width: 676px;
        margin: 0 auto;
        background: #688cf8;
        color: #fff;
        box-sizing: border-box;
        padding: 20px;
        position: relative;
        span {
            display: block;
            text-indent: 100px;
            font-size: 28px;
            line-height: 50px;
            b {
                color: #fbfe03;
                font-weight: bold;
            }
        }
        img {
            position: absolute;
            width: 70px;
            height: 70px;
            left: 20px;
            top: -7px;
        }
    }

    .matchinfo {
        position: relative;
        span {
            width: 304px;
            height: 90px;
            font-size: 48px;
            font-weight: bold;
            text-align: center;
            position: absolute;
            color: #fff;
            line-height: 90px;
        }
        .hteam {
            top: 165px;
            left: 43px;
        }
        .vteam {
            width: 280px;
            top: 208px;
            right: 43px;
        }
        .leaguename {
            position: absolute;
            color: #fff;
            width: 100%;
            text-align: center;
            top: 40px;
            strong {
                font-weight: bold;
                font-size: 32px;
                display: block;
            }
            b {
                font-size: 24px;
                display: block;
            }

        }
        .time {

        }
    }

    .getstatus {
        margin-top: 54px;
        background: url(http://common-1253410441.file.myqcloud.com/activityimg/20171207163109.png) no-repeat center;
        background-size: cover;
        height: 138px;
        display: block;
        text-align: center;
        font-size: 50px;
        color: #fff;
        line-height: 116px;
    }

    .pnel {
        .title {
            background: url(http://common-1253410441.file.myqcloud.com/activityimg/20171207163146.png) no-repeat center top;
            background-size: cover;
            text-align: center;
            font-weight: bold;
            color: #fff;
            display: block;
            height: 57px;
            line-height: 57px;
            font-size: 28px;
            margin-top: 57px;
            margin-bottom: 57px;
        }
        table {
            width: 640px;
            margin: 0 auto;
            display: block;
            td {
                border: 2px solid #fff;
                color: #fff;
                text-align: center;
                width: 320px;
                height: 76px;
            }
            thead {
                width: 640px;
                tr {
                    background: #7e9eff;
                    color: #fff;
                    height: 70px;
                    width: 100%;
                    td {
                        width: 50%;
                    }
                }
            }
            tbody {
                tr {
                    td {

                    }
                }
            }
        }
        dl {
            width: 660px;
            margin: 0 auto;
            color: #fff;
            line-height: 50px;
        }
    }

</style>